<!--
 * @Author: TT-hzy
 * @Date: 2024-07-29 15:50:38
 * @LastEditors: TT-hzy
 * @LastEditTime: 2024-08-02 17:54:24
-->
<script setup lang="ts">
import LearnNav from '@/components/LearnNav.vue'
import LearnPreview from '@/components/LearnPreview.vue'
import LearnDowm from '@/components/LearnDowm.vue'
import CardView from '@/components/CardView.vue'
import LearnMobile from '@/components/LearnMobile.vue'
import LearnImgSwiper from '@/components/LearnImgSwiper.vue'
const isHideNav = ref(false)

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
function handleResize() {
  isHideNav.value = window.innerWidth < 768
}
</script>

<template>
  <div class="bg"></div>
  <div class="page-pc" v-if="!isHideNav">
    <LearnNav />
    <main class="home-container">
      <LearnDowm />
      <LearnImgSwiper class="preview" />
      <!-- <LearnPreview class="preview" /> -->
    </main>
  </div>

  <LearnMobile v-else />
</template>

<style lang="less" scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  z-index: -100;
  background: linear-gradient(to top, #000013 0%, #000023 10%, #000000 100%);
}
.page-pc {
  display: flex;
  width: 100vw;

  .home-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 40px;
  }

  .preview {
    display: flex;
    width: 50%;
    position: relative;
  }
}

@media (max-width: 600px) {
  .page-pc {
    display: none;
  }
}
</style>
